<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="The most popular HTML, CSS, and JS library in Metro style.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon">
    <link rel="icon" href="../../favicon.ico" type="image/x-icon">

    <link href="../../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">

    <title>Github demo page - Metro 4 :: Popular HTML, CSS and JS library</title>

    <style>
        .app-bar-wrapper, .app-bar {
            background-color: #23292D;
            color: #bbbbbb;
        }

        .app-bar-search {
            background-color: #3F4447!important;
            color: #bbbbbb!important;
            width: 200px!important;
        }

        .tabs ul li {
            background-color: #f8f8f8 ;
            white-space: nowrap;
            font-size: 14px;
        }
        .tabs ul li.active {
            border-top: 2px solid orange;
        }

        table {
            font-size: 14px;
        }

        table td [class*=mif-] {
            margin: 0 4px;
        }

        code {
            background-color: #F7F7F7;
            cursor: pointer;
        }
        code:hover {
            background-color: #ededed;
        }

        #hero {
            background-color: #ffffff!important;
        }

        .tabs {
            min-height: auto;
        }

        @media all and (min-width: 768px) {
            #hero {
                border-bottom: 1px solid #dfdfdf ;
                background-color:#f8f8f8 !important ;
            }

            .tabs {
                top: 2px;
            }
        }

        .tabs li {
            background-color: #f8f8f8!important; ;
        }
        .tabs li.active {
            background-color: #ffffff!important; ;
        }
    </style>
</head>
<body class="h-vh-100">
    <div class="pos-fixed fixed-top app-bar-wrapper z-top">
        <header class="container pos-relative" data-role="appbar" data-expand-point="md">
            <a href="#" class="brand no-hover fg-white-hover order-1"><span class="mif-github mif-2x"></span></a>
            <div class="app-bar-item d-none d-flex-md order-2">
                <input type="text" placeholder="Search" class="app-bar-input app-bar-search">
            </div>

            <ul class="app-bar-menu order-4 order-md-3">
                <li><a href="#" class="fg-white-hover">Pull requests</a></li>
                <li><a href="#" class="fg-white-hover">Issues</a></li>
                <li><a href="#" class="fg-white-hover">Marketplace</a></li>
                <li><a href="#" class="fg-white-hover">Explorer</a></li>
            </ul>

            <div class="app-bar-container ml-auto order-3 order-md-4">
                <a href="#" class="app-bar-item"><span class="mif-bell"></span></a>

                <div class="app-bar-container">
                    <a class="app-bar-item dropdown-toggle marker-light" href="#"><span class="mif-plus"></span></a>
                    <ul class="d-menu place-right" data-role="dropdown">
                        <li><a href="">New repository</a></li>
                        <li><a href="">Import repository</a></li>
                        <li><a href="">New gist</a></li>
                        <li><a href="">New organization</a></li>
                        <li class="divider"></li>
                        <li><a href="">New issue</a></li>
                    </ul>
                </div>

                <div class="app-bar-container">
                    <a class="app-bar-item dropdown-toggle marker-light pl-1 pr-5" href="#">
                        <img class="rounded" data-role="gravatar" data-email="sergey@pimenov.com.ua" data-size="25">
                    </a>
                    <ul class="v-menu place-right" data-role="dropdown">
                        <li><a href="">Signed as <strong>olton</strong></a></li>
                        <li class="divider"></li>
                        <li><a href="">Your profile</a></li>
                        <li><a href="">Your stars</a></li>
                        <li><a href="">Your gists</a></li>
                        <li class="divider"></li>
                        <li><a href="">Help</a></li>
                        <li><a href="">Settings</a></li>
                        <li><a href="">Sign out</a></li>
                    </ul>
                </div>
            </div>
        </header>
    </div>

    <div class="pt-16 bg-light" id="hero">
        <div class="container">
            <div class="row">
                <div class="cell-md-4 text-center-fs text-left-md pt-2">
                    <div>
                        <span class="mif-books"></span>
                        <a href="#"><span id="github-owner">olton</span> / <span id="github-project">Metro-UI-CSS</span></span></a>
                    </div>
                </div>

                <div class="cell-md-8 text-center-fs text-right-md pt-2">
                    <div class="info-button rounded">
                        <a href="#" class="button"><span class="mif-eye"></span> Unwatch</a>
                        <a href="#" class="info" id="github-watch">589</a>
                    </div>

                    <div class="info-button rounded">
                        <a href="#" class="button"><span class="mif-star-full"></span> Star</a>
                        <a href="#" class="info" id="github-star">5,546</a>
                    </div>

                    <div class="info-button rounded mt-1 mt-0-md">
                        <a href="#" class="button"><span class="mif-flow-tree"></span> Fork</a>
                        <a href="#" class="info" id="github-fork">1,841</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid pt-4 pl-0 pr-0 pl-3-md pr-3-md">
            <div class="container">
            <ul data-role="tabs" class="bg-light w-100 pl-0 pr-0" data-expand-point="md">
                <li><a href="#"><span class="mif-embed"></span> Code</a></li>
                <li><a href="#"><span class="mif-info"></span> Issues</a></li>
                <li><a href="#"><span class="mif-flow-branch"></span> Pull requests</a></li>
                <li><a href="#"><span class="mif-library"></span> Projects</a></li>
                <li><a href="#"><span class="mif-wikipedia"></span> Wiki</a></li>
                <li><a href="#"><span class="mif-chart-bars"></span> Insights</a></li>
                <li><a href="#"><span class="mif-cog"></span> Settings</a></li>
            </ul>
            </div>
        </div>
    </div>

    <div class="container-fluid pt-4">
        <div class="container">
            <div class="place-right">
                <butoon class="button">Edit</butoon>
            </div>
            <div>
                Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style.
            </div>
            <div class="mt-2">
                <code>css</code>
                <code>javascript</code>
                <code>less</code>
                <code>html</code>
                <code>html5</code>
                <code>metro</code>
                <code>metro-ui</code>
                <code>metro-ui-css</code>
                <code>metro4</code>
                <a href="#" class="text-small">Manage topics</a>
            </div>

            <hr class="mt-4">

            <div class="mt-4">
                <div class="row">
                    <div class="cell-md-6 text-center text-left-md pt-2">
                        <button class="button small rounded mr-1 hovered">Branch: <strong>master</strong></button>
                        <button class="button small rounded hovered">New pull request</button>
                    </div>

                    <div class="cell-md-6 text-center-fs text-right-md pt-2">
                        <button class="button small rounded hovered">Create new file</button>
                        <button class="button small rounded hovered">Uploads files</button>
                        <button class="button small rounded hovered">Find file</button>
                        <button class="button small rounded success">Clone or download</button>
                    </div>
                </div>
            </div>

            <div class="p-4 mt-4 bg-light border bd-default">
                <div class="row">
                    <div class="cell-md cell-sm-6 text-center">
                        <a href="" class="fg-dark fg-cyan-hover no-decor d-flex flex-align-center flex-justify-center">
                            <span class="mif-history"></span>
                            <span class="text-bold ml-1 mr-1">1,300</span>
                            <span>commits</span>
                        </a>
                    </div>
                    <div class="cell-md cell-sm-6 text-center">
                        <a href="" class="fg-dark fg-cyan-hover no-decor d-flex flex-align-center flex-justify-center">
                            <span class="mif-flow-tree"></span>
                            <span class="text-bold ml-1 mr-1">5</span>
                            <span>branches</span>
                        </a>
                    </div>
                    <div class="cell-md cell-sm-6 text-center">
                        <a href="" class="fg-dark fg-cyan-hover no-decor d-flex flex-align-center flex-justify-center">
                            <span class="mif-tag"></span>
                            <span class="text-bold ml-1 mr-1">40</span>
                            <span>releases</span>
                        </a>
                    </div>
                    <div class="cell-md cell-sm-6 text-center">
                        <a href="" class="fg-dark fg-cyan-hover no-decor d-flex flex-align-center flex-justify-center">
                            <span class="mif-users"></span>
                            <span class="text-bold ml-1 mr-1">37</span>
                            <span>contributors</span>
                        </a>
                    </div>
                    <div class="cell-md cell-sm-12 text-center">
                        <a href="" class="fg-dark fg-cyan-hover no-decor d-flex flex-align-center flex-justify-center">
                            <span class="mif-balance-scale"></span>
                            <span class="text-bold ml-1 mr-1">MIT</span>
                        </a>
                    </div>
                </div>
            </div>
            <div data-role="progress" data-value="75" data-cls-bar="bg-darkMauve" data-cls-back="bg-yellow"></div>

            <div class="mt-4">
                <div class="p-4 bg-light border bd-default">
                    <div class="row">
                        <div class="cell-md-6 text-center text-left-md">
                            <img data-role="gravatar" data-email="sergey@pimenov.com.ua" data-size="24" class="rounded">
                            <span class="text-bold reduce-1">olton</span>
                            <span class="reduce-1">fix 4.1.3</span>
                        </div>
                        <div class="cell-md-6 text-center text-right-md">
                            Latest commit <a href="">fbefe75</a>  3 days ago
                        </div>
                    </div>
                </div>

                <table class="table row-border table-border row-hover">
                    <tbody>
                    <tr>
                        <td><span class="mif-folder"></span> <a href="">docs</a></td>
                        <td><span>fix 4.1.3</span></td>
                        <td><span>today</span></td>
                    </tr>
                    <tr>
                        <td><span class="mif-folder"></span> <a href="">icons</a></td>
                        <td><span>fix 4.1.3</span></td>
                        <td><span>today</span></td>
                    </tr>
                    <tr>
                        <td><span class="mif-folder"></span> <a href="">js</a></td>
                        <td><span>fix 4.1.3</span></td>
                        <td><span>today</span></td>
                    </tr>
                    <tr>
                        <td><span class="mif-folder"></span> <a href="">less</a></td>
                        <td><span>fix 4.1.3</span></td>
                        <td><span>today</span></td>
                    </tr>
                    <tr>
                        <td><span class="mif-file-code"></span> <a href="">.gitattributes</a></td>
                        <td><span>fix 4.1.3</span></td>
                        <td><span>today</span></td>
                    </tr>
                    <tr>
                        <td><span class="mif-file-code"></span> <a href="">.gitignore</a></td>
                        <td><span>fix 4.1.3</span></td>
                        <td><span>today</span></td>
                    </tr>
                    <tr>
                        <td><span class="mif-file-code"></span> <a href="">.travis.yml</a></td>
                        <td><span>fix 4.1.3</span></td>
                        <td><span>today</span></td>
                    </tr>
                    <tr>
                        <td><span class="mif-file-code"></span> <a href="">CHANGELOG.md</a></td>
                        <td><span>fix 4.1.3</span></td>
                        <td><span>today</span></td>
                    </tr>
                    <tr>
                        <td><span class="mif-file-code"></span> <a href="">README.md</a></td>
                        <td><span>fix 4.1.3</span></td>
                        <td><span>today</span></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <footer class="container-fluid">
        <div class="container border-top bd-default pt-2 mt-10">
            <div class="row flex-align-center">
                <div class="cell-md-5 text-center-md text-left">
                    <ul class="inline-list reduce-2">
                        <li>&copy; 2018 Metro 4</li>
                        <li><a href="">Terms</a></li>
                        <li><a href="">Privacy</a></li>
                        <li><a href="">Security</a></li>
                        <li><a href="">Status</a></li>
                        <li><a href="">Help</a></li>
                    </ul>
                </div>
                <div class="cell-md-2 text-center">
                    <div>
                        <a href="" class="no-decor fg-lightGray"><span class="mif-github mif-2x"></span></a>
                    </div>
                </div>
                <div class="cell-md-5 text-center-md text-right">
                    <ul class="inline-list reduce-2">
                        <li><a href="">Contact</a></li>
                        <li><a href="">API</a></li>
                        <li><a href="">Training</a></li>
                        <li><a href="">Shop</a></li>
                        <li><a href="">Blog</a></li>
                        <li><a href="">About</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

    <script src="../../metro/js/metro.js"></script>

    <script>
        Metro.utils.github("olton/Metro-UI-CSS", function(data){
            $("#github-fork").text(Number(data.forks).format(0, 0, ","));
            $("#github-star").text(Number(data.stargazers_count).format(0, 0, ","));
            $("#github-watch").text(Number(data.subscribers_count).format(0, 0, ","));
            $("#github-owner").text(data.owner.login);
            $("#github-project").text(data.name);
        })
    </script>
</body>
</html>